<div class="home_carrusel">
    <div class="main-image">
        <a href="./articulo/<?= $carrusel[0]->id ?>" class="link">
            <div class="image">
                <img src="<?= BASE_URL ?>/articulo/imagen/<?= $carrusel[0]->id ?>/625x312" >
            </div>
            <h3><?= $carrusel[0]->title ?></h3>
        </a>

        <div class="image-title"></div>
    </div>

    <div class="thumbs">
        <img src="img/carrusel/arrow-prev.png" id="prev" />
        <img src="img/carrusel/arrow-next.png" id="next" />
        <div class="thumbs-scroll">
            <ul>
                <?
                if (count($carrusel) < 6)
                    $totalThumbs = count($carrusel);
                else
                    $totalThumbs = 6;
                foreach ($carrusel as $articulo) {
                    ?>
                    <li article_id="<?= $articulo->id ?>" title="<?= $articulo->title ?>">
                        <img src="<?= BASE_URL ?>/articulo/imagen/<?= $articulo->id ?>/90x60" >
                    </li>
                    <?
                }
                ?>

            </ul>
        </div>
    </div>
</div>


<script type="text/javascript">
    head.ready(function() {
		
        (function(){
            $(".home_carrusel .thumbs .thumbs-scroll").jCarouselLite({
                visible: <?= $totalThumbs; ?>,
                btnNext: ".home_carrusel #next",
                btnPrev: ".home_carrusel #prev"
            });
			
            $(".home_carrusel .thumbs .thumbs-scroll li").click(function() {
                var me 		= $(this);
                var article_id 	= me.attr("article_id");
                var title 	= me.attr("title");
				
				
                var main = me.closest(".home_carrusel").find(".main-image");
                //Set Image and Text
                main.find(".image img").attr("src","./articulo/imagen/"+article_id+"/625x312");
                main.find("a").attr("href","./articulo/"+article_id);
                main.find("h3").text(title);
            });
        })();

    });
</script>
